<template>
	<el-dialog title="查看订单详情" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="90%">
		<div class="order-details">
			<div class="order-number">
				<span style="font-size: 16px; font-weight: bold;">所属门店：{{ orderDetails.pickupName }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span>门店编号：{{ orderDetails.shopNo }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span>订单编号：{{ orderDetails.orderNo }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span>下单时间：{{ orderDetails.createTime | forDate}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<!-- <span>会员账号：{{ orderDetails.userPhone }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
				<span v-if="orderDetails.orderType == 2"> 提货码：{{ orderDetails.pickupNo }}</span>&nbsp;&nbsp;
			</div>
		
			<div class="order-details-info">
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column label="订单主状态" width="140" align="center">
						<template slot-scope="scope">
							<div class="table-list">
								<el-image v-if="scope.row.orderStatus === 1" style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/toPay.png')"></el-image>
								<el-image v-if="scope.row.orderStatus === 2 && (scope.row.afterSalesStatus===0||scope.row.afterSalesStatus===5)" style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/paid.png')" ></el-image>
								<el-image v-if="scope.row.orderStatus === 2 && (scope.row.afterSalesStatus===1||scope.row.afterSalesStatus===3)" style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/success.png')" ></el-image>
								<el-image v-if="scope.row.orderStatus === 2 && (scope.row.afterSalesStatus===2||scope.row.afterSalesStatus===4)" style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/close.png')" ></el-image>
								<el-image v-if="scope.row.orderStatus === 3" style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/close.png')" ></el-image>
								<el-image v-if="scope.row.orderStatus === 4" style="width: 80px; height: 80px" :src="require('@/assets/orderStatus/success.png')" ></el-image>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="订单信息">
						<template slot-scope="scope">
							<div class="table-list">
								<p>订单类型：{{scope.row.orderType === 1 ? '零售订单' : scope.row.orderType === 2 ? '商城自提' : scope.row.orderType === 5 ? '线下二维码收款' : '商城物流'}}</p>
								<p>销售渠道：{{item.saleChannel === 1 ? '商家/供应商' : item.saleChannel === 2 ? '直播平台' : '微信小程序'}}</p>
								<p>订单主状态：
									{{scope.row.orderStatus==0?"初始":""}}
									{{scope.row.orderStatus==1?"待付款":""}}
									{{scope.row.orderStatus==2&&scope.row.afterSalesStatus!=4?"已付款，待提货":""}}
									{{scope.row.orderStatus==4&&scope.row.afterSalesStatus!=4?"订单完成":""}}
									{{scope.row.orderStatus==3?"交易关闭（取消订单）":""}}
									{{scope.row.orderStatus==2&&scope.row.afterSalesStatus==4?"交易关闭（售后退款）":""}}
								</p>
								<p>售后状态：
									{{scope.row.afterSalesStatus==0?"无售后":""}}
									{{scope.row.afterSalesStatus==1?"部分退款中":""}}
									{{scope.row.afterSalesStatus==2?"全部退款中":""}}
									{{scope.row.afterSalesStatus==3?"部分退款成功":""}}
									{{scope.row.afterSalesStatus==4?"全部退款成功":""}}
									{{scope.row.afterSalesStatus==5?"已撤销退款":""}}
								</p>
								<p>支付状态：{{scope.row.isPaid === 2 ? '付款完成' : scope.row.isPaid === 1 ? '已支付消费券，现金未付' : scope.row.payType === 0 ? '未付款' : ''}}</p>
								<p v-if="scope.row.isPaid >= 1">支付方式：{{scope.row.payType === 7 ? '微信支付' : scope.row.payType === 8 ? '建行支付' : '其他'}}{{scope.row.isMemberPay ? '+消费券' : ''}}</p>
								<p>交易流水：{{scope.row.transactionId ? scope.row.allinpayOrderNo : '-'}}</p>
								<p>付款时间：{{scope.row.payTime | forDate}}</p>
								<!-- <p>小票打印时间：{{scope.row.printTime | forDate}}</p>
								<p>小票编号：{{scope.row.ticketNo}}</p> -->
							</div>
						</template>
					</el-table-column>
					<el-table-column v-if="orderDetails.orderType == 2" label="提货信息">
						<template slot-scope="scope">
							<div class="table-list">
								<template v-if="item.saleChannel === 2">
									<p>提货人：{{scope.row.consigneeName}}</p>
									<p>提货人手机号：{{scope.row.consigneePhone}}</p>
								</template>
								<template v-if="item.saleChannel === 0">
									<p>提货人：{{scope.row.userNickName}}</p>
									<p>提货人手机号：{{scope.row.userPhone}}</p>
								</template>
								
								<p>提货门店：{{scope.row.pickupName}}</p>
								<p>门店地址：{{scope.row.pickupAddress}}</p>
								<p>门店电话：{{scope.row.pickupPhone}}</p>
								<p>门店营业时间：{{scope.row.pickupBusinessHours}}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column v-if="orderDetails.afterSalesStatus == 3 || orderDetails.afterSalesStatus == 4" label="退款退货">
						<template slot-scope="scope">
							<div class="table-list">
								<p>售后类型：退款退货</p>
								<p>售后主状态：已处理</p>
								<p>退款状态：已退款</p>
								<p>退款路径：{{scope.row.refundPath==0?"原路退回":"线下退款"}}</p>
								<p>退款方式：{{scope.row.payType === 7 ? '微信支付' : scope.row.payType === 8 ? '建行支付' : '其他'}}{{scope.row.isMemberPay ? '+消费券' : ''}}</p>
							    <!-- <p>退款流水号(交易号)：{{scope.row.refundFlowNo}}</p> -->
								<p>退款金额：￥{{scope.row.payableAmount}}</p>
								<p>退券金额：￥{{scope.row.couponAmount}}</p>
								<!-- <p>退款时间：{{scope.row.refundTime | forDate}}</p> -->
								<!-- <p>退款人：{{scope.row.refunder}}</p> -->
								<p>退货退款理由：{{scope.row.reason==0?"不想要了":scope.row.reason==1?"过期商品":scope.row.reason==2?"包装破损":"其他"}}</p>
								<p>退货退款备注：{{scope.row.refundRemark}}</p>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		
			<div class="order-sku-list">
				<el-table :data="detailsTableData" stripe border style="width: 100%">
					<el-table-column label="订单明细">
						<el-table-column label="商品信息" width="520">
							<template slot-scope="scope">
								<div class="sku-info">
									<div class="sku-image">
										<el-image style="width: 80px; height: 80px;" :src="scope.row.thumbImage"></el-image>
									</div>
									<div class="sku-details">
										<h3>{{scope.row.productName}}</h3>
										<p>{{scope.row.productSkuName}}</p>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="商品条码" prop="productBarCode" width="200"></el-table-column>
						<el-table-column label="数量" prop="quantity" ></el-table-column>
						<el-table-column label="单位" prop="unitName" ></el-table-column>
						<el-table-column label="零售单价" width="160">
							<template slot-scope="scope">
								¥{{scope.row.price}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="会员单价" width="160">
							<template slot-scope="scope">
								¥{{scope.row.memberPrice}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="消费券" >
							<template slot-scope="scope">
								¥{{scope.row.memberCoupon}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="消费券小计">
							<template slot-scope="scope">
								¥{{scope.row.couponAmountSubtotal}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==1" label="金额小计" >
							<template slot-scope="scope">
								¥{{scope.row.memberPriceSubtotal}}
							</template>
						</el-table-column>
						<el-table-column v-if="orderDetails.isMemberPay ==0" label="金额小计" >
							<template slot-scope="scope">
								¥{{scope.row.orderAmount}}
							</template>
						</el-table-column>
					</el-table-column>
				</el-table>
		
				<div class="sku-summary">
					<div class="sku-summary-content">
						<p>
							<span>商品总金额：</span><span>¥{{orderDetails.orderAmount}}</span>
						</p>
						<p v-if="orderDetails.isMemberPay ==1" >
							<span>消费券合计：</span><span>¥{{orderDetails.couponAmount}}</span>
						</p>
						<p>
							<span>优惠金额：</span><span>¥{{orderDetails.discountAmount}}</span>
						</p>
						<!-- <p>
							<span>物流费：</span><span>¥{{orderDetails.logisticsFee}}</span>
						</p>
						<p>
							<span>服务费：</span><span>¥{{orderDetails.serviceFee}}</span>
						</p> -->
						<p>
							<span>应支付金额：</span><span>¥{{orderDetails.payableAmount}}</span>
						</p>
						<p>
							<span>实际支付金额：</span><span class="sku-summary-text">¥{{orderDetails.payAmount}}</span>
						</p>
						<!-- <p>
							<span>找零金额：</span><span class="sku-summary-text">¥{{orderDetails.changeAmount}}</span>
						</p> -->
						<p>
							<span>实付消费券金额：</span><span class="sku-summary-text">¥{{orderDetails.couponAmountPay}}</span>
						</p>
					</div>
				</div>
			</div>
		
			<div class="order-sku-list order-refund-list" v-if="orderDetails.afterSalesStatus != 0 && orderDetails.afterSalesStatus != 5">
				<el-table :data="orderRefundTableData" stripe border style="width: 100%">
					<el-table-column label="售后记录">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
						<el-table-column prop="refundNo" label="退单编号"></el-table-column>
						<el-table-column prop="createTime" label="申请时间" width="100">
							<template slot-scope="scope">
								{{scope.row.createTime | forDate}}
							</template>
						</el-table-column>
						<el-table-column label="商品信息" width="420">
							<template slot-scope="scope">
								<div class="sku-info" v-for="item in scope.row.refundDetails" :key="item.id">
									<div class="sku-details">
										<h3>{{item.productName}}</h3>
										<p>{{item.productSkuName}}</p>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="退款金额">
							<template slot-scope="scope">
								¥{{scope.row.refundAmount}}
							</template>
						</el-table-column>
						<el-table-column label="退消费券">
							<template slot-scope="scope">
								¥{{scope.row.refundCouponAmount}}
							</template>
						</el-table-column>
						<el-table-column label="售后类型">
							<template slot-scope="scope">
								{{scope.row.afterSalesType==1?"退款退货":""}}
					            {{scope.row.afterSalesType==2?"仅退款":""}}
							</template>
						</el-table-column>
						<el-table-column label="退款路径">
							<template slot-scope="scope">
								{{scope.row.refundPath==0?"原路退回":""}}
					            {{scope.row.refundPath==1?"线下退款":""}}
							</template>
						</el-table-column>
						<el-table-column label="退款方式">
							<template slot-scope="scope">
								{{scope.row.refundType==1?"支付宝":""}}
					            {{scope.row.refundType==2?"微信":""}}
								{{scope.row.refundType==3?"通联":""}}
					            {{scope.row.refundType==4?"现金":""}}
							</template>
						</el-table-column>
						<el-table-column label="退款状态">
							<template slot-scope="scope">
								{{scope.row.refundStatus==1?"退款中":""}}
								{{scope.row.refundStatus==2?"已退款":""}}
								{{scope.row.refundStatus==3?"已撤销":""}}
							</template>
						</el-table-column>
						<el-table-column label="退货入库状态">
							<template slot-scope="scope">
								{{scope.row.returnStockInStatus==1?"入库中":""}}
								{{scope.row.returnStockInStatus==2?"已入库":""}}
								{{scope.row.returnStockInStatus==3?"已撤销":""}}
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="其他说明"></el-table-column>
						<el-table-column fixed="right" label="操作">
							<template slot-scope="scope">
								<el-button type="success" size="small" @click="queryAfterSale(scope.row.orderId,scope.row.id)">查看详情</el-button>
							</template>
						</el-table-column>
					</el-table-column>
				</el-table>
			</div>
		</div>
		
		<div slot="footer">
			<el-button @click="close">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { queryOrderDetailByOrderId, queryOrderRefundList } from '@api/order/order'
	import dayjs from 'dayjs'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				orderDetails: '',
				tableData: [],
				detailsTableData: [],
				orderRefundTableData: []
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getDetails();
					this.getOrderRefundList();
				}
			}
		},
		filters: {
			forDate: (val) => {
				let formatTime = '';
				formatTime = val == null ? '' : dayjs(val).format('YYYY-MM-DD HH:mm:ss');
				return formatTime;
			}
		},
		methods: {
			getDetails() { //获取详情
				queryOrderDetailByOrderId({ orderId: this.item.id })
					.then(res => {
						this.orderDetails = res.data;
						this.tableData.push(res.data);
						this.detailsTableData = res.data.details;
					})
			},
			getOrderRefundList() { //退款信息
				queryOrderRefundList({ orderId: this.item.id })
					.then(res => {
						this.orderRefundTableData = res.data;
					})
			},
			
			queryAfterSale(orderId,refundId) {
				sessionStorage.setItem('orderIdQuery', orderId);
				sessionStorage.setItem('refundId', refundId);
				this.$router.push('/order/orderAfterSaleDetail');
			},
			
			close() {
				this.$emit('close');
				this.tableData = [];
				this.detailsTableData = [];
				this.orderRefundTableData = [];
			},
		}
	}
</script>

<style lang="scss" scoped>
.order-details {
	padding: 20px;
	
	.order-number {
		width: 100%;
		height: 60px;
		align-items: center;
		display: flex;
		border:#666 1px 
		span {
			font-size: 14px;
			color: #333;
			margin: 30px 30px 30px 30px;
		}
	}
	.order-progress {
		width: 100%;
		align-items: center;
		display: flex;
		padding: 50px 0;
		.order-status {
			width: 250px;
			text-align: center;
			flex: 0 0 100px;
			h3 {
				font-size: 24px;
				color: #333;
			}
			p {
				font-size: 14px;
				color: #999;
				margin-top: 10px;
			}
		}
		.order-progress-bar {
			flex: 1 1 auto;
		}
	}
	.order-details-info {
		width: 100%;
		.table-list {
			p {
				font-size: 14px;
				color: #666;
				margin: 3px 0;
			}
		}
	}
	.order-sku-list {
		width: 100%;
		margin-top: 30px;
		.sku-info {
			width: 100%;
			display: flex;
			.sku-image {
				width: 80px;
				height: 80px;
				flex: 0 0 80px;
			}
			.sku-details {
				flex: 1 1 auto;
				h3 {
					font-size: 14px;
					color: #333;
					padding-left: 30px;
				}
				p {
					font-size: 14px;
					color: #999;
					margin-top: 4px;
					padding-left: 30px;
				}
			}
		}
		.sku-summary {
			border: #ebeef5 1px solid;
			border-top: none;
			justify-content: flex-end;
			display: flex;
			padding: 20px;
			.sku-summary-content {
				width: 240px;
				p {
					width: 100%;
					font-size: 14px;
					color: #333;
					justify-content: space-between;
					display: flex;
					margin: 5px 0;
				}
				span {
					font-size: 14px;
				}
				span.sku-summary-text {
					font-size: 18px;
					font-weight: bold;
					color: #ff5642;
				}
			}
		}
	}
}

::v-deep .el-table thead.is-group th {
	background: #fff!important;
}
.warning-text {
	color: #ff5642;
}
.success-text {
	color: #1aa57b;
}
</style>